<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{

            width:160px;
            height:170px;
            background-color: darkblue;
            border:10px solid red;
            /*3.内边距*/
           /* padding-top: 10px;
            padding-left: 20px;
            padding-right: 30px;
            padding-bottom: 10px;*/
            /*上下左右都是10px*/
            padding: 10px;

            /*上下10px，左右20px*/
            padding:10px 20px;
            /*上10px 左右20px 下 30px*/
            padding: 10px 20px 30px;

            /*上右下左*/
            padding:10px 20px 30px 40px;

            /*盒子大小：边框大小+padding+内容实际大小*/

        }
        span{
            /*display:block*/
            border: 2px solid darkred;
            padding: 10px;
            /*行内元素无法设置width 和height*/
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
<div class="box">我来演示padding</div>
<span>
    我是span
</span>
</body>
</html>